<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>列表导航</span></div>
    <div class="bds">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件样式" name="3">
          <el-form size="medium" label-width="100px">
            <el-form-item label="组件样式">
              <el-radio-group @change="onChange" v-model="data.style_type">
                <el-radio :label="1">图标</el-radio>
                <el-radio :label="2">卡片</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'content_bgcolor'"></ColorPicker></el-form-item>
            <el-form-item label="标题颜色"><ColorPicker :color="data.title" :name="'color'"></ColorPicker></el-form-item>
            <el-form-item label="标题大小">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" :min="12" v-model="data.title.size"></el-slider>
                <el-input-number v-model="data.title.size" :controls="false" :min="12" :max="20"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.content_padding.top"></el-slider>
                <el-input-number v-model="data.content_padding.top" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.content_padding.bottom"></el-slider>
                <el-input-number v-model="data.content_padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.content_padding.lr"></el-slider>
                <el-input-number v-model="data.content_padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="2">
          <div>
            <el-form label-width="100px" size="medium">
              <div v-if="data.style_type == 1">
                <el-form-item label="背景颜色"><ColorPicker :color="data" :name="'bgcolor'"></ColorPicker></el-form-item>
                <el-form-item label="文字颜色"><ColorPicker :color="data" :name="'textcolor'"></ColorPicker></el-form-item>
              </div>

              <el-form-item label="文字大小">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="20" :min="12" v-model="data.card_font_size"></el-slider>
                  <el-input-number v-model="data.card_font_size" :controls="false" :min="12" :max="20"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="图标大小">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="100" v-model="data.width"></el-slider>
                  <!-- <el-input-number v-model="data.width" :controls="false" :min="0" :max="100"></el-input-number> -->
                </div>
              </el-form-item>
              <el-form-item label="上间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.top"></el-slider>
                  <el-input-number v-model="data.padding.top" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>

              <el-form-item label="下间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.bottom"></el-slider>
                  <el-input-number v-model="data.padding.bottom" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>

              <el-form-item label="左右间距">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.padding.lr"></el-slider>
                  <el-input-number v-model="data.padding.lr" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="上边角">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.radius.top"></el-slider>
                  <el-input-number v-model="data.radius.top" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
              <el-form-item label="下边角">
                <div class="slider_box">
                  <el-slider class="slider_item" :max="50" v-model="data.radius.bottom"></el-slider>
                  <el-input-number v-model="data.radius.bottom" :controls="false" :min="0" :max="50"></el-input-number>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="内容" name="1">
          <div class="tc">
            <ul>
              <draggable element="ul" v-model="membershiplist" :animation="200">
                <li v-for="(item, i) in membershiplist" :key="i" :class="{on: data.currentIndex == i}">
                  <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                  <div class="txt" @click="selectTab(item, i)">{{ item.name }}</div>
                  <!-- <div class="delIcon" @click="removeTab(i)"><i class="el-icon-delete"></i></div> -->
                </li>
              </draggable>
            </ul>
          </div>

          <el-form size="medium" label-width="100px">
            <el-form-item label="每行数量">
              <el-radio-group v-model="data.num">
                <el-radio :label="2">2个</el-radio>
                <el-radio :label="3">3个</el-radio>
                <span v-if="data.style_type == 1">
                  <el-radio :label="4">4个</el-radio>
                  <el-radio :label="5">5个</el-radio>
                </span>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="单双行">
              <el-radio-group v-model="data.rows">
                <el-radio :label="1">单行</el-radio>
                <el-radio :label="2">双行</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="边框类型">
              <el-radio-group v-model="data.type">
                <el-radio :label="1">方形</el-radio>
                <el-radio :label="2">圆角</el-radio>
                <el-radio :label="3">圆形</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <draggable element="div" style="padding: 10px;" v-model="data.list[data.currentIndex]" :animation="200">
            <div class="container" v-for="(item, i) in data.list[data.currentIndex]" :key="i">
              <!-- <i class="el-icon-error cancal" @click="dellist(i)"></i> -->
              <i class="el-icon-menu left"></i>
              <div class="content">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="卡片图标">
                    <div class="icon_box"><vimage style="width: 60px;height: 60px;" :src="item.icon"></vimage></div>
                  </el-form-item>
                  <div v-if="data.style_type == 2">
                    <el-form-item label="卡片背景颜色"><ColorPicker :color="item" :name="'card_bg'"></ColorPicker></el-form-item>
                    <el-form-item label="卡片标题颜色"><ColorPicker :color="item" :name="'card_color'"></ColorPicker></el-form-item>
                  </div>
                  <el-form-item label="权益标题">
                    <span>{{ item.text }}</span>
                  </el-form-item>
                  <el-form-item label="链接地址">
                    <div @click="selectlink(item, i)"><Linkdiv :linkdata="item.linkdata"></Linkdiv></div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </draggable>

          <!-- <el-button style="width: 100%" @click="addlist">添加</el-button> -->
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-card>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2';
import draggable from 'vuedraggable';
import ColorPicker from '@/components/ColorPicker/index';
import Linkdiv from '@/components/Link/index';
import {contentlist, getMembershipList} from '@/api/mall/vipuser';
export default {
  data() {
    return {
      activeNames: ['1', '2', '3'],
      dataList: [],
      currentIndex: 0,
      membershiplist: []
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    draggable,
    ColorPicker,
    Upload,
    Linkdiv
  },
  created() {
    this.data.currentIndex = 0;
    this.getData();
  },
  methods: {
    selectTab(item, i) {
      this.data.currentIndex = i;
    },
    getData() {
      let data = {};
      getMembershipList(1, 100, data).then(res => {
        let data = res.msg.data;
        this.membershiplist = data;

        if (this.membershiplist.length > 0) {
          this.data.list = [];
          this.membershiplist.forEach(a => {
            let list = [];
            a.content.forEach(c => {
              let item = {
                icon: c.image,
                text: c.title,
                card_bg: '#019CFE',
                card_color: '#fff',
                linkdata: {
                  link: '',
                  name: '',
                  id: '',
                  type: '',
                  login_type: 1
                }
              };
              list.push(item);
            });

            this.data.list.push(list);
          });
        }else{

        }
      });
    },
    contentlist() {
      let data = {
        page: 1,
        size: 1000
      };
      contentlist(data).then(res => {
        let data = res.msg.data;
        this.dataList = data;
        this.getData();
        // this.total = res.msg.total;
      });
    },
    selectlink(item, i) {
      this.acivedata = item;
      this.activid = i;
      this.$parent.showlinkselcet(item);
    },
    getAData(item) {
      this.acivedata.linkdata = item;
    },
    //获取图片
    getImage(data, i) {
      this.data.list[i].icon = data;
    },
    //删除图标
    removeIcon(tag) {
      this.data.content[tag] = '';
    },
    //选择图标
    chooseIcon() {
      this.$alert('功能暂未开发');
    },
    addlist() {
      let b = (this.data.list.length % 5) + 1;
      this.data.list.push({
        icon: window.location.origin + '/static/images/btns' + b + '.png',
        linkdata: {
          link: '',
          name: '',
          id: '',
          type: ''
        },
        card_bg: '#019CFE',
        card_color: '#fff',
        text: '权益文字' + (this.data.list.length + 1)
      });
    },
    dellist(i) {
      this.data.list.splice(i, 1);
    },
    onChange() {
      if (this.data.style_type == 2) {
        this.data.num = 2;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}

.icon_box {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  //border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
.tc {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;

  ul {
    li {
      width: 100%;
      height: 36px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      font-size: 14px;
      color: #606266;
      border: 1px solid #dcdfe6;
      cursor: pointer;

      &:nth-child(n + 2) {
        border-top: none;
      }

      &:hover {
        border: 1px dashed #2d8cf0;
      }

      &.on {
        border: 1px solid #2d8cf0;
      }

      .dragIcon {
        width: 40px;
        line-height: 36px;
        text-align: center;
        border-right: 1px solid #dcdfe6;
        background: #f4f6f8;
        font-size: 16px;
      }

      .txt {
        padding-left: 10px;
        line-height: 36px;
        flex: 1;
      }

      .delIcon {
        width: 40px;
        text-align: center;
        line-height: 36px;
        color: #f56c6c;
      }

      .abl {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #f56c6c;
      }
    }
  }
}
</style>
